<template>
    <div class="two">
        <!-- <div class="header-select">
            <el-select v-model="value" placeholder="请选择" size="mini" @change="changeNum">
                <el-option v-for="item in yearly" :key="item" :label="item" :value="item">
                </el-option>
            </el-select>
        </div> -->
        <div id="main2">
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                value: '',
                yearly: [],
                countrylist: [],
                isLoading: false,
                dateboundlist: {}, //时间为key
                myChart: null,
            }
        },
        mounted() {
            this.getDataDraw();
        },
        methods: {
            //请求数据
            getDataDraw() {
                this.isLoading = true;
                this.$store.dispatch("ajaxApi", {
                    // this.$store.dispatch("ajax", {
                    url: `/zonghe/api/algor?name.equals=GDP排行&sort=add_time,desc&size=1`,
                    method: "get",
                    succeed: (res) => {
                        console.log(res);
                        let data = JSON.parse(res[0].outputs)
                        let forecast = data.forecast;
                        let original = data.original;
                        console.log(original);
                        for (let key in original) {
                            if (this.yearly.length == 0) {
                                for (let item of original[key]) {
                                    this.yearly.push(item.x);
                                    this.yearly.sort();
                                }
                            }
                            for (let a of original[key]) {
                                let obj = {};
                                obj.name = key;
                                obj.value = a.y;
                                if (!this.dateboundlist[a.x]) {
                                    this.dateboundlist[a.x] = []
                                }
                                this.dateboundlist[a.x].push(obj);
                            }
                        }
                        this.value = this.yearly[0]
                        this.initCharts(this.dateboundlist[this.value]);
                    },
                    errored: (err) => {
                        // console.log(err);
                        if (err.response) {
                            this.islistLoad = false;
                            this.modelsData = [];
                        }
                    }
                });
            },
            initCharts(seconddata) {
                console.log(seconddata);
                this.$emit('changeNum','two',{arr: this.yearly,value: this.value})
                let maxnum = 0;
                let num = []
                for (let item of seconddata) {
                    num.push(item.value);
                }
                num.sort();
                maxnum = num[num.length - 1];
                var chartDom = document.getElementById('main2');
                this.myChart = echarts.init(chartDom);
                var option;
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    textStyle: {
                        color: '#fff'
                    },
                    legend: {
                        data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    series: [{
                        type: 'funnel',
                        left: '5%',
                        top: 20,
                        bottom: 10,
                        width: '90%',
                        min: 0,
                        max: maxnum,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: seconddata
                    }]
                };

                option && this.myChart.setOption(option);
                    window.addEventListener('resize', () => {
                // 自动渲染echarts
                this.myChart.resize();
      })
            },
            //切换数据
            changeNum(val) {
                var option = this.myChart.getOption();
                option.series[0].data = this.dateboundlist[val];
                this.myChart.setOption(option);
            }
        }
    }
</script>

<style scoped>
    .two {
        width: 100%;
        height: 100%;
    }

    .header-select {
        width: 100%;
        height: 30px;
        text-align: center;
    }

    #main2 {
        width: 100%;
        height: 100%;
        /* height: calc(100% - 50px); */
    }
</style>